<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>远程调用案例</title>
</head>
<body>
    <div id="app">
        <h1>前后端调用</h1>
    </div>
    
    <!-- 1.完成前后端远程调用 -->
    <!-- 1.1引入js函数 -->
    <script src="../js/axios.js"></script>
    
    <script>
        
        //1.动态获取用户列表信息 axios.get(url地址，提交的参数)
        let url1 = "http://localhost:8090/findAll"
        axios.get(url1)
            .then(function(promise){
                console.log(promise)
                //获取服务器返回值的数据
                console.log(promise.data)
            })

        //2. 根据id动态获取用户信息
			let id = 3
			let url2 = "http://localhost:8090/findUserById?id="+id
			axios.get(url2)
				 .then(function(promise){
					 console.log(promise.data)
				 })

			//3.多参数的get请求如果是多个参数，可以考虑将其封装为对象
			// let age = 18
			// let sex = "女"
			// let url3 = "http://localhost:8090/findUserByAs?age="+age+"&sex="+sex
			let user3 = {age: 18, sex: "女"}
			let url3 = "http://localhost:8090/findUserByAs"
			//get请求要传递对象要使用{params:url3}来接
			axios.get(url3,{params:user3})
				.then(function(promise){
					console.log(promise.data)
				})

            //4.实现数据修改的操作
			//4.1请求路径 要求必须使用restful结构
			// let id = 1
			// let name = "黑熊精"
			// let age = 3000
			// let sex = "男"
			// let url4 = "http://localhost:8090/updateById/"+id+"/"++name"/"++age"/"+sex+"
			//以上写法正确，但是最low的写法

			let user4 = {id:1,name:"黑熊精",age:3000,sex:"男"}
			/* 
				4.2 前端知识点：模板字符串写法
					语法：``  反引号
					取值：${key}
					作用：1.保留代码片段的格式
						2.可以动态取值 ${key}
			 */
			let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
			//具体类型已经写到了查询URL中，put里已经不需要再写了
			axios.put(url4)
				.then(function(promise){
					console.log(promise.data)
				})
			/* 
				完成后会有跨域报错问题，是因为参数接收导致的
				Idea中@RequestMapping处也要求必须使用put类型的注解，将其修改为
				@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}",
				                        method = RequestMethod.PUT)或修改为
				@PostMapping("updateById/{id}/{name}/{age}/{sex}")
			 */
        
    </script>
</body>
</html>